////
/// Components
/// Plate variants
////

///
/// Level variant
.Plate--levelBottom {
  padding-top: 100%;
  width: 100%;

  .PlateShadow {
    transform: rotate(55deg);
  }
}

.Plate--levelMiddle {
  padding-top: 75%;
  width: 75%;

  .PlateShadow {
    transform: rotate(45deg);
  }
}

.Plate--levelTop {
  padding-top: 50%;
  width: 50%;

  .PlateShadow {
    transform: rotate(35deg);
  }
}

///
/// Draggable variant
.PlateWrapper {
  --shadow-offset-x: 0;
  --shadow-offset-y: 0;
  --plate-scale-x: 1;
  --plate-scale-y: 1;
  --bottom-translate-x: 0;
  --bottom-translate-y: 0;
  --middle-translate-x: 0;
  --middle-translate-y: 0;
  --top-translate-x: 0;
  --top-translate-y: 0;

  &.draggable-container--placed {
    .Plate--levelBottom,
    .Plate--levelMiddle,
    .Plate--levelTop {
      animation-name: plate-placed;
      animation-duration: get-duration();
      animation-timing-function: get-easing();
    }

    .Plate--levelBottom {
      animation-delay: get-duration() / 2;
    }

    .Plate--levelMiddle {
      animation-delay: get-duration() / 4;
    }
  }
}

.Plate--isDraggable {
  color: get-color(coal, dark);
  // helps smooth out on some devices: + transform get-duration(faster) linear
  transition: color get-duration(fast) get-easing();

  &:focus,
  &:hover {
    color: get-color(brand, blue);
  }

  .PlateShadowWrapper {
    transform: translate3d(var(--shadow-offset-x), var(--shadow-offset-y), 0);
  }

  .PlateShadow::before {
    background-color: currentColor;
    animation-duration: get-duration(slow);
    animation-timing-function: get-easing();
  }

  .PlateContent {
    background-color: white;
    border: get-border(flexible) solid currentColor;
    animation-duration: get-duration(slow);
    animation-timing-function: get-easing();

    @media screen and (min-width: get-breakpoint()) {
      border-width: get-border(thick);
    }
  }

  &.Plate--levelBottom {
    transform: translate3d(var(--bottom-translate-x), var(--bottom-translate-y), 0)
      scale(var(--plate-scale-x), var(--plate-scale-y));

    &:focus,
    &:hover {
      .PlateContent,
      .PlateShadow::before {
        animation-name: plate-small;
      }
    }
  }

  &.Plate--levelMiddle {
    transform: translate3d(var(--middle-translate-x), var(--middle-translate-y), 0)
      scale(var(--plate-scale-x), var(--plate-scale-y));

    &:focus,
    &:hover {
      .PlateContent,
      .PlateShadow::before {
        animation-name: plate-medium;
      }
    }
  }

  &.Plate--levelTop {
    transform: translate3d(var(--top-translate-x), var(--top-translate-y), 0)
      scale(var(--plate-scale-x), var(--plate-scale-y));

    &:focus,
    &:hover {
      .PlateContent,
      .PlateShadow::before {
        animation-name: plate-big;
      }
    }
  }

  // would be nice if there was a better way to suppress the creation of the mirror
  &.draggable-mirror {
    display: none;
  }
}

.draggable-container--placed {
  .Plate--levelBottom {
    .PlateContent,
    .PlateShadow::before {
      animation-name: plate-small;
    }
  }

  .Plate--levelMiddle {
    .PlateContent,
    .PlateShadow::before {
      animation-name: plate-medium;
    }
  }

  .Plate--levelTop {
    .PlateContent,
    .PlateShadow::before {
      animation-name: plate-big;
    }
  }
}
